<template>
   <div>
     <h1>用户注册</h1>
     <el-form
       ref="ruleFormRef"
       :model="ruleForm"
       status-icon
       :rules="rules"
       label-width="auto"
       class="demo-ruleForm"
     >
       <el-form-item label="用户名" prop="username">
         <el-input v-model="ruleForm.username" autocomplete="off" />
       </el-form-item>
       <el-form-item label="手机号" prop="mobile">
         <el-input v-model="ruleForm.mobile" autocomplete="off" />
       </el-form-item>
       <el-form-item label="角色">
         <el-select v-model="ruleForm.role" placeholder="请选择角色" style="width: 240px">
           <el-option
             v-for="role in roles"
             :key="role.id"
             :label="role.name"
             :value="role.name"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
       </el-form-item>
       <el-form-item label="确认密码" prop="confirmPassword">
         <el-input v-model="ruleForm.confirmPassword" type="password" autocomplete="off" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm">提交</el-button>
         <el-button @click="resetForm">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import axios from 'axios'
import { useRouter } from "vue-router";
import http from '../http'

const router = useRouter()

const ruleForm = reactive({
   username: '',
   mobile: '',
   password: '',
   confirmPassword: '',
   role: '', // 添加角色字段
})

const roles = ref([]) // 角色列表
const ruleFormRef = ref()

// 验证手机号
const checkPhone = (rule: any, value: any, callback: any) => {
   if (!value) {
     return callback(new Error('请输入手机号'))
   }
   // 这里可以添加更复杂的手机号验证逻辑
   if (!/^\d{11}$/.test(value)) {
     return callback(new Error('无效手机号'))
   }
   callback()
}

// 验证两次密码是否一致
const checkPassword = (rule: any, value: any, callback: any) => {
   if (value === '') {
     return callback(new Error('请再次输入密码'))
   }
   if (value !== ruleForm.password) {
     return callback(new Error("两次输入不一样!"))
   }
   callback()
}

const rules = reactive({
   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   mobile: [{ required: true, validator: checkPhone, trigger: 'blur' }],
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   confirmPassword: [{ required: true, validator: checkPassword, trigger: 'blur' }],
})

const submitForm = () => {
   http.post('register/', {
     username: ruleForm.username,
     mobile: ruleForm.mobile,
     password: ruleForm.password,
     role: ruleForm.role, // 添加角色信息
   })
   .then(response => {
     console.log('注册成功', response);
     alert('注册成功');
     router.push({path:'/role'}); // 注册成功后跳转到角色页面
   })
   .catch(error => {
     console.error('注册失败', error);
   });
}

const resetForm = () => {
   if (!ruleFormRef.value) return
   ruleFormRef.value.resetFields()
}

// 获取角色列表
// const fetchRoles = () => {
//    http.get('role/')
//       .then(response => {
//          // 假设response.data是你要的数据
//          roles.value = response.data;
//       })
//       .catch(error => {
//          console.error('获取角色列表失败', error);
//       });
// }

onMounted(()=>{
  http.get('role/')
    .then(response => {
      // 假设response.data是你要的数据
      roles.value = response.data;
    })
    .catch(error => {
      console.error('获取角色列表失败', error);
    });
})
// fetchRoles(); // 组件挂载后获取角色列表
</script>